<template>
  <div class="home">
    <!-- <div class="bj">
      <img src="../../../assets/images/bj.jpg" alt="" />
    </div>
    <SettingOutlined class="setting" /> -->
    <div class="time">
      <p>当前日期：{{ time }} 星期{{ day }}</p>
    </div>
    <div class="title">
      <p>{{adminName}}{{ username ?? "未知用户" }}</p>
    </div>
  </div>
</template>
<script lang="ts">
import { getInfo } from '@/api'
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
enum TimeType {
  '日',
  '一',
  '二',
  '三',
  '四',
  '五',
  '六',
}
export default defineComponent({
  setup () {
    const date = new Date()
    const store = useStore()
    const time = `${date.getFullYear()}年${
      date.getMonth() + 1
    }月${date.getDate()}日`
    const day = TimeType[date.getDay()]
    const username = computed(() => store.state.authModule.userInfo?.username)
    const adminName = ref('')
    const getInfoFunc = async () => {
      const { data } = await getInfo()
      if (data) {
        adminName.value = data?.name + '宿舍管理员：'
      } else {
        adminName.value = '系统管理员：'
      }
    }
    getInfoFunc()
    // const clock = () => {
    //   return `${date.getHours() > 9 ? date.getHours() : '0' + date.getMinutes()}时${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getHours()}分${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}秒`
    // }

    return {
      time,
      day,
      username,
      adminName
    }
  }
})
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  .setting {
    position: absolute;
    z-index: 0;
    top: 0.8125rem /* 13/16 */;
    right: 0.8125rem /* 13/16 */;
    font-size: 39px;
    color: blue;
  }
  .bj {
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .time,
  .title {
    width: 100%;
    z-index: 1;
    font-size: 1.5rem /* 24/16 */;
    text-align: center;
  }
  .time {
    font-weight: 700;
  }
}
</style>
